<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频四足机器人遥控页面</title>
    <style type="text/css">
        .container {
            width: 399px;
            height: 600px;
            border: 0px solid rgb(255, 255, 255);
            margin: 0px auto;
            background-color: rgb(88, 88, 188);;
            text-align: center;
        }

        /* 设置头部样式 */
        .image-container {
            width: 399px;
            height: 330px;
            border: 0px solid rgb(220, 217, 218);
            background-color: rgb(115, 177, 255);
            text-align: center;
        }
        
        /* 设置中部样式 */
        .center-container {
            width: 399px;
            height: 30px;
            border: 0px solid rgb(220, 217, 218);
            background-color: rgb(99, 99, 99);
            text-align: center;
        }

        /* 设置主体内容样式 */
        .content {
            width: 399px;
            height: 190px;
            background-color: rgb(48, 45, 45);
        }

        /* 设置主体内容左列的样式 */
        .content .content-left {
            width: 0px;
            height: 100%;
            background-color: rgb(115, 177, 255);
            margin-right: 0px;
            float: left;
        }

        /* 设置主体内容的中间的内容的样式 */
        .content .content-center {
            width: 399;
            height: 100%;
            background-color: rgb(115, 155, 255);
            float: left;
            margin-left: 0px;
        }
        /* 设置底部内容的样式 */
        .bottom{
            width: 399px;
            height: 50px;
            background-color: rgb(100, 100, 255);
        }

        /* 控件垂直旋转 */
        .slider-vertical {        
            width: 150px;
            height: 20px;
            margin: 0;
            transform-origin: 75px 75px;
            transform: rotate(-90deg);
        }
        .button {
            width: 90px;
            height: 30px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="stream-container" class="image-container">
            视频遥控四足机器人V0.1
            <figure>
            <img id="stream" src="" crossorigin>
            </figure>
            https://shop64022682.taobao.com/ DIY模块地址
        </div>
        <div class="center-container">
            <label for="缩放">缩放:</label>
            <input type="range" id="slider" name="slider" min="1" max="5" value="5">
            <span id="sliderValue">5</span>
            <button id="toggle-stream" style="margin-left: 30px;">打开摄像头</button>
        </div>
        <div class="content">
            <div class="content-left">
             
            </div>
            <div class="content-center">
                <!-- <button class="button" id="moveLeft">左前</button> -->
                <button class="button" id="forward">前进</button>
                <button class="button" id="backward">后退</button>
                <!-- <button class="button" id="moveRightBtn">右前</button> -->
                <button class="button" id="turnRightBtn">右转</button>
                <button class="button" id="turnLeftBtn">左转</button>
                <button class="button" id="lie">伏地</button>
                <button class="button" id="dance1">踏步</button>
                <button class="button" id="hello">Hello</button>
                <button class="button" id="fight">战舞</button>
                <button class="button" id="pushUp">俯卧撑</button>
                <button class="button" id="dance2">摇摆舞</button>
                <button class="button" id="crabDance">蟹舞</button>
                <button class="button" id="dance3">踢踏舞</button>
                <button class="button" id="stand">站立</button>
                <button class="button" id="storage">收纳</button>
            </div>
            <!-- <div class="content-right">主体内容的右列</div> -->
        </div>
        <div class="bottom"> 
            
        </div>
    </div>
</body>

</html>
<script>
    document.addEventListener('DOMContentLoaded', function (event) {
        var baseHost = document.location.origin
        // baseHost = 'http://192.168.0.1'
        var streamUrl = baseHost + ':81'

        const view = document.getElementById('stream')
        const viewContainer = document.getElementById('stream-container')
        const streamButton = document.getElementById('toggle-stream')
        const slider = document.getElementById('slider');
        const sliderValue = document.getElementById('sliderValue');
        const forwardButton = document.getElementById('forward');
        const backwardButton = document.getElementById('backward');
        // const moveLeftButton = document.getElementById('moveLeft');
        // const moveRightButton = document.getElementById('moveRightBtn');
        const turnLeftButton = document.getElementById('turnLeftBtn');
        const turnRightButton = document.getElementById('turnRightBtn');
        const lieButton = document.getElementById('lie');
        const helloButton = document.getElementById('hello');
        const fightButton = document.getElementById('fight');
        const pushUpButton = document.getElementById('pushUp');
        const crabDanceButton = document.getElementById('crabDance');
        const dance1Button = document.getElementById('dance1');
        const dance2Button = document.getElementById('dance2');
        const dance3Button = document.getElementById('dance3');
        const standButton = document.getElementById('stand');
        const storageButton = document.getElementById('storage');
               
        // 设置视频窗口大小
        slider.oninput = function () {
            sliderValue.innerText = this.value;
            const query = `${baseHost}/control?var=framesize&val=${this.value}`
            fetch(query);
        }
        const stopStream = () => {
            window.stop();
            streamButton.innerHTML = '打开摄像头'
        }
        const show = el => {
            el.classList.remove('hidden')
        }
        const startStream = () => {
            const query = `${baseHost}/control?var=framesize&val=5`
            fetch(query)
                .then(response => {
                    console.log(`request to ${query} finished, status: ${response.status}`)
                })
            view.src = `${streamUrl}/stream`
            show(viewContainer)
            slider.value =5,
            sliderValue.innerText = 5
            streamButton.innerHTML = '关闭摄像头'
        }
        // 启动页面时，默认拉取视频
        startStream();
        streamButton.onclick = () => {
            const streamEnabled = streamButton.innerHTML === '关闭摄像头'
            if (streamEnabled) {
                stopStream()
            } else {
                startStream()
            }
        }
        // 
        const setSteps = (stepCmd) => {
            const query = `${baseHost}/control?var=${stepCmd}&val=0`
            fetch(query);
        }
        forwardButton.onclick = () => {
            setSteps("forward");
        }
        backwardButton.onclick = () => {
            setSteps("backward");
        }
        // moveLeftButton.onclick = () => {
        //     setSteps("moveLeft");
        // }

        // moveRightButton.onclick = () => {
        //     setSteps("moveRight");
        // }
        turnLeftButton.onclick = () => {
            setSteps("turnLeft");
        }
        turnRightButton.onclick = () => {
            setSteps("turnRight");
        }
        lieButton.onclick = () => {
            setSteps("lie");
        }
        helloButton.onclick = () => {
            setSteps("hello");
        }
        fightButton.onclick = () => {
            setSteps("fight");
        }
        pushUpButton.onclick = () => {
            setSteps("pushUp");
        }
        crabDanceButton.onclick = () => {
            setSteps("crabDance");
        }
        dance1Button.onclick = () => {
            setSteps("dance1");
        }
        dance2Button.onclick = () => {
            setSteps("dance2");
        }
        dance3Button.onclick = () => {
            setSteps("dance3");
        }
        standButton.onclick = () => {
            setSteps("stand");
        }
        storageButton.onclick = () => {
            setSteps("storage");
        }
    })
</script>